// 引入node中系统自带的path模块
const path = require('path')
// 引入插件
// 自动构建htmlyem
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css插件代码
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 引入css压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
    entry: //'./src/js/index.js',      // 入口
    {
        // 公用css
        commonCSS: './src/js/commonCSS.js',
        // 引用第三方库
        captcha: './src/lib/captcha/captcha-mini.js',
        swiper: './src/lib/swiper/swiper-bundle.js',
        // 引用utils工具集  自己封装
        axios: './src/utils/axios.js',
        common: './src/utils/common.js',
        advert: './src/js/advertisement.js',

        login: './src/js/login.js',
        index: './src/js/index.js',
        register: './src/js/register.js',
        mine: './src/js/mine.js',
        sport: './src/js/sport.js',
    },
    output: {
        // 定义打包后文件输出路径
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的名字
        filename: 'js/[name].js'

    },     // 出口
    module: {       // module配置loader
        rules: [
            {
                // 通过正则规则找到  
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader']
                // 将原来style-loader替换成MiniCssExtractPlugin.loader
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/i,
                // use: ['style-loader', 'css-loader', 'less-loader']
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.(jpg|png|jpeg|webg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'imgs/[hash][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2|woff)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash][ext][query]'
                }
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [      // 插件
        // 自动创建html文件
        new HtmlWebpackPlugin({
            template: './src/index.html',//模板页面
            filename: 'index.html',//打包后的页面名称
            chunks: ['commonCSS', 'axios', 'swiper', 'common', 'index']
        }),
        new HtmlWebpackPlugin({
            template: './src/advertisement.html',//模板页面
            filename: 'advertisement.html',//打包后的页面名称
            chunks: ['commonCSS', 'advert']
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',//模板页面
            filename: 'login.html',//打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'login']
        }),
        new HtmlWebpackPlugin({
            template: './src/register.html',//模板页面
            filename: 'register.html',//打包后的页面名称
            chunks: ['commonCSS', 'captcha', 'axios', 'common', 'register']
        }),
        new HtmlWebpackPlugin({
            template: './src/mine.html',//模板页面
            filename: 'mine.html',//打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'mine']
        }),
        new HtmlWebpackPlugin({
            template: './src/sport.html',//模板页面
            filename: 'sport.html',//打包后的页面名称
            chunks: ['commonCSS', 'axios', 'common', 'sport']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        new CssMinimizerPlugin()


    ],
    mode: 'development'     // 模式
}